<template>
  <div class="flash-sale-wrap">
    <!-- 限时标题 -->
    <div class="flash-title">
      <div class="flash-content">
        <svg-icon iconClass="flash_sale" className="icon-flash"></svg-icon>
        <span class="flash-text">限时抢购</span>
        <van-count-down :time="time" format="HH mm ss">
          <template v-slot="timeData">
            <span class="item">{{ timeData.hours }}</span>
            <span class="item">{{ timeData.minutes }}</span>
            <span class="item">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="more" @click="handleToMore">更多</div>
    </div>
      <!-- 产品列表 -->
      <flash-product-list v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import FlashProductList from './FlashProductList'
export default {
  name: 'FlashSale',
  // props: {
  //   flashSaleProductsList: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data () {
    return {
      time: 30 * 60 * 1000 * 100
    }
  },
  components: {
    FlashProductList
  },
  methods: {
    handleToMore () {
      this.$toast({
        message: '敬请期待',
        duration: 800
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.flash-sale-wrap {
  margin-top: px2rem(10);
  padding: px2rem(21) 0 px2rem(16) 0;
  .flash-title {
    @include flexType(space-between);
    padding: 0 px2rem(10) px2rem(10) px2rem(5);
    height: px2rem(25);
    line-height: px2rem(25);

    .flash-content {
      @include flexType(space-around);
      .flash-text {
        font-size: px2rem(18);
        padding-right: px2rem(10);
      }
      .icon-flash {
        @include setWH(px2rem(25), px2rem(25));
        vertical-align: middle;
      }
    }
  }
  .more {
    @include setFontColor(px2rem(15), $theme-color-red);
  }
  .item {
    display: inline-block;
    width: px2rem(22);
    margin-right: px2rem(5);
    @include setFontColor(px2rem(12), #f5f6fa);
    text-align: center;
    background-color: $text-color-black;
    opacity: .8;
  }
}
</style>
